.index {
  width: 100%;
  background: #e7eaee;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .swiper {
    background: #fff;
    height: 25%;
    background: var(--bgc);
    .Carousel {
      height: 100%;
      padding: 0.1%;
      .swiperitem {
        height: 100%;
        position: relative;
      }

      >div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        h2 {
          position: absolute;
          top: 50%;
          left: 58%;
          font-size: 20px;
          color: #fff;
          margin-top: -6%;
          margin-left: -19%;
        }

        p {
          width: 25%;
          position: absolute;
          top: 60%;
          left: 57%;
          font-size: 16px;
          color: #fff;
          margin-top: -6%;
          margin-left: -19%;

          >span {
            margin-left: 4%;

          }
        }
      }

      .img {
        width: 100%;
        height: 100%;
        padding: 1%;
        background: #fff;
      }

    }
  }

  .main {
    width: 100%;
    background: #fff;
    margin-top: 14px;
    background-color:var(--bgc);
    color: var(--fc);
    .top {
      display: flex;
      align-items: center;

      .tags {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #f0f2f7;

        span {
          margin: 0 2%;
          font-size: 1.5%;
        }

        span:first-child {
          color: #ff0064;
        }

        span:hover {
          color: #ff0064;
          cursor: pointer;
        }
      }
    }
  }

  .gotop {
    width: 3.5%;
    height: 5%;
    >div{
      width: 100%;
      height: 100%;
      .icon-huidaodingbu {
        display: inline-block;
        line-height: 30px;
        font-style: 30px;
        color:var(--fc);
      }
    }
   
  }

}
